<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>AE-圣诞树</title>
		<style>
			html,
			body {
				margin: 0;
				width: 100%;
				height: 100%;
			}

			#main {
				position: fixed;
				top: 0;
				left: 0;
			}

			#video1 {
				width: 100%;
				height: 100%;
			}

			.hidden {
				display: none;
			}
		</style>

	</head>

	<body id="app">
	
		<div id="main">
			<video id="video1" muted="muted" autoplay="autoplay" loop="loop" src="./video/chrismas.mp4">
			</video>
			<audio id="music1" autostart="true" loop="loop" preload="auto" controls hidden="true">
				<source src="./music/jinniandongtianpeizhewoba.mp3"></source>
			</audio>

		</div>


	</body>
	<script type="text/javascript">
		var video = document.getElementById("video1");
		video.playbackRate *= 0.8;
		video.play();
		$(function() {
			var video = document.getElementById("video1");
			video.src = "";
			video.play();
			 var music = document.getElementById("music1");
			 music.src = "";
			music.play();
		});
	</script>
	<script>
		var myAuto = document.getElementById('music1');
		var app = document.getElementById("app");
		// 监听事件
		app.addEventListener("mousemove", function() {
			console.log("played");
			myAuto.play();
		}, true);

		// 用定时器触发事件
		setInterval(function() {
			if ("createEvent" in document) {
				var evt = document.createEvent("HTMLEvents");
				evt.initEvent("mousemove", false, true);
				app.dispatchEvent(evt);
			} else{
				app.fireEvent("onmousemove");
			}
		}, 1000);
	</script>
</html>
